<template>
  <div class="hardTraningMain">
    <div class="hardTraningTop">

      <div class="hardTraningStage">
        <p class="hardChoiseLeft">
          <span>专题</span>
        </p>
        <p class="hardChoiseRight">
          <picker class=""
                  mode="selector"
                  @change="bindMultiPickerChange"
                  @columnchange="bindMultiPickerColumnChange"
                  @cancel="cancelPicker"
                  :value="multiIndex"
                  :range="multiArray">
            {{multiIndex}}
          </picker>
        </p>
      </div>
      <div class="hardTraningStage">
        <p class="hardChoiseLeft">
          <span>知识点</span>
        </p>
        <p class="hardChoiseRight">
          <picker class=""
                  mode="selector"
                  @change="bindMultiPickerChange2"
                  @columnchange="bindMultiPickerColumnChange2"
                  @cancel="cancelPicker2"
                  :value="multiIndex2"
                  :range="multiArray2">
            {{multiIndex2}}
          </picker>

        </p>
      </div>
      <div class="hardTraningStage">
        <p class="hardChoiseLeft">
          <span>试卷名称</span>
        </p>
        <p class="hardChoiseRight2">
          <input type="text"
                 placeholder="请填写试卷名称"
                 v-model="paperName">
        </p>
      </div>
      <div class="hardTraningStage">
        <p class="hardChoiseLeft">
          <span>做题时间（分钟）：</span>
        </p>
        <p class="hardChoiseRight2">
          <input type="number"
                 placeholder="请填写做题时间"
                 v-model="examTime">
        </p>
      </div>
      <div class=" hardTraningChoise">
        <div class="hardChoiseLeft">
          <span>题型：</span>
        </div>
        <div class="categoryItem">
          <p class="categoryLeft">
            单选题：
          </p>
          <p class="categoryRight">
            <input type="number"
                   placeholder="请填写多少题"
                   v-model="singleopition">
          </p>
        </div>
        <!-- <div class="categoryItem">
                  <p class="categoryLeft">
                   多选题（共27）题：
                  </p>
                  <p class="categoryRight">
                    <input type="text" placeholder="请填写多少题" >
                  </p>
              </div>
               <div class="categoryItem">
                  <p class="categoryLeft">
                   判断题（共17）题：
                  </p>
                  <p class="categoryRight">
                    <input type="text" placeholder="请填写多少题">
                  </p>
              </div>
              <div class="categoryItem">
                  <p class="categoryLeft">
                    填空题（共17）题：
                  </p>
                  <p class="categoryRight">
                    <input type="text" placeholder="请填写多少题">
                  </p>
              </div>
                <div class="categoryItem">
                  <p class="categoryLeft">
                      问答题（共1）题：
                  </p>
                  <p class="categoryRight">
                    <input type="text" placeholder="请填写多少题">
                  </p>
              </div> -->
      </div>
      <div class="categoryItemTips">
        如果您不希望做某种题型，请填写0
      </div>
    </div>
    <div class="navToTraning"
         @click.stop="submit">
      <span>前往强化</span>
    </div>
  </div>
</template>
  <script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      data1: [],
      data2: [],
      idData: [],
      idData2: [],
      multiArray: [
        // '第1章',
        // '第2章',
        // '第3章',
        // '第4章',
        // '第5章',
        // '第6章'
      ],
      multiArray2: [
        // '手扶拖拉机维修',
        // '美容美发学校哪家好',
        // '母猪的配种',
        // '1+1=？'
      ],
      multiIndex: '请选择章节',
      multiIndex2: '— 请选择知识点 —',
      selectNum1: -1,
      selectNum2: -1,
      paperName: '',
      examTime: '',
      singleopition: 1,
      paperArray: [],
      examRoom: [],
      totalArray: []

    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    bindMultiPickerChange (e) {
      this.multiIndex = this.multiArray[e.mp.detail.value]
      this.selectNum1 = e.mp.detail.value
      for (let k in this.data1) {
        if (this.data1[k].name === this.selectNum1) {
          this.id1 = this.data1[k].id
        }
      }
      this.multiArray2 = []
      for (let i in this.paperArray[e.mp.detail.value]) {
        console.log(this.paperArray[e.mp.detail.value][i].name)
        console.log(this.multiArray2)
        this.multiArray2[i] = this.paperArray[e.mp.detail.value][i].name
      }

      console.log(this.paperArray)
      console.log(this.multiArray2)
      console.log('selectNum1', this.selectNum1)
    },
    bindMultiPickerChange2 (e) {
      this.multiIndex2 = this.multiArray2[e.mp.detail.value]
      this.selectNum2 = e.mp.detail.value
      console.log(this.selectNum2)
    },
    submit () {
      console.log(parseInt(this.selectNum1) >= 0)
      console.log(this.selectNum2)
      if (this.selectNum1 === -1) {
        wx.showModal({
          title: '请选择章节',
          showCancel: false
        })
        return false
      }
      if (this.selectNum2 === -1) {
        wx.showModal({
          title: '请选择知识点',
          showCancel: false
        })
        return false
      }
      if (!this.paperName) {
        wx.showModal({
          title: '请设置你的考卷名称',
          showCancel: false
        })
        return false
      }
      if (!this.examTime) {
        wx.showModal({
          title: '请设置考试时间',
          showCancel: false
        })
        return false
      }
      if (!this.singleopition) {
        wx.showModal({
          title: '请设置考卷题量',
          showCancel: false
        })
        return false
      }
      var obj = {
        singleopition: this.singleopition,
        examTime: this.examTime,
        paperName: this.paperName,
        selectNum2: this.selectNum2,
        selectNum1: this.selectNum1,
        paperId: this.totalArray[this.selectNum1].paper_list[this.selectNum2].id

      }
      wx.showModal({
        title: '试题生成中，请稍后',
        showCancel: false,
        success: () => {
          console.log(obj)
          wx.navigateTo({
            url: '../hardTraningExam/main?number=' + obj.singleopition + '&paperId=' + obj.paperId + '&userid=' + this.userid + '&paperName=' + obj.paperName + '&examTime=' + obj.examTime
          })
        }
      })
    },
    init () {
      let that = this
      this.userid = this.userInfo.user_id || wx.getStorageSync('user_id')
      this.$http.get({
        url: 'https://dati.co-links.com/operat/strong_get/'
      }).then((res) => {
        console.log(res.data)
        if (res.data.code === '0000') {
          that.totalArray = res.data.specialtopic
          for (var i in res.data.specialtopic) {
            that.multiArray.push(res.data.specialtopic[i].name)
            console.log(res.data.specialtopic[i].id)
            // that.idData[i].id = res.data.specialtopic[i].id
            // that.idData.push({
            //   id: res.data.specialtopic[i].id
            // })
            that.data1.push({
              name: res.data.specialtopic[i].name,
              id: res.data.specialtopic[i].id
            })
            that.examRoom.push(res.data.specialtopic[i])
            that.paperArray.push(res.data.specialtopic[i].paper_list)
          }
          for (let k in that.paperArray[0]) {
            that.multiArray2[k] = that.paperArray[0][k].name
            // that.idData2[k] = that.paperArray[0][k].id
            // console.log(that.paperArray[0][k].id)
          }
        }
        // console.log(that.idData1)
        console.log(that.totalArray)
        // console.log(that.idData2)
        // console.log(this.multiArray)
        // console.log(this.examRoom)
        // console.log(this.paperArray)
        console.log(this.multiArray2)
      })
    }
  },
  mounted () {
    this.init()
  },
  onUnload () {
    console.log('onunalod')
    this.multiIndex = '请选择章节'
    this.multiIndex2 = '— 请选择知识点 —'
  },
  onShow () {
    this.multiIndex = '请选择章节'
    this.multiIndex2 = '— 请选择知识点 —'
    this.singleopition = ''
    this.examTime = ''
    this.paperName = ''
  }
}
</script>
 <style lang="stylus">
 .hardTraningMain {
   background: #f7f7f7;

   .hardTraningTop {
     padding: 0 32rpx;
     background: white;
   }

   .hardTraningStage {
     display: -webkit-box;
     display: -webkit-flex;
     display: flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     align-items: center;
     justify-content: space-between;
     height: 100rpx;
     line-height: 100rpx;
     border-bottom: 2rpx solid #e6e6e6;
   }

   .hardChoiseLeft {
     font-size: 34rpx;
     color: #333333;
     position: relative;
     padding-left: 40rpx;
     height: 100rpx;
     line-height: 100rpx;

     &:before {
       position: absolute;
       left: 0;
       top: 0;
       content: '*';
       color: red;
     }
   }

   .hardChoiseRight {
     font-size: 26rpx;
     color: #999999;
     position: relative;
     padding-right: 30rpx;

     picker {
       width: 100%;
       height: 100%;
     }

     &:after {
       position: absolute;
       content: '';
       top: 50%;
       margin-top: 0rpx;
       right: 0rpx;
       border-style: solid dashed dashed dashed;
       border-width: 10rpx;
       border-color: #999999 transparent transparent transparent;
       width: 0;
       height: 0;
     }
   }

   .hardChoiseRight2 {
     text-align: right;
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     flex: 1;

     input {
       font-size: 26rpx;
       color: #999999;
     }
   }
 }

 .hardTraningChoise {
   height: auto;
   border-bottom: 2rpx solid #e6e6e6;

   .hardChoiseLeft {
     height: 80rpx;
     line-height: 80rpx;
   }
 }

 .categoryItem {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
   justify-content: space-between;
   height: 80rpx;
   line-height: 80rpx;

   .categoryRight {
     text-align: right;
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     flex: 1;

     input {
       font-size: 26rpx;
       color: #999999;
     }
   }
 }

 .categoryItem {
   .categoryLeft {
     padding-left: 80rpx;
     font-size: 32rpx;
     color: #333333;
   }
 }

 .categoryItemTips {
   height: 66rpx;
   line-height: 66rpx;
   text-align: right;
   font-size: 28rpx;
   color: #999999;
 }

 .navToTraning {
   text-align: center;
   padding-top: 85rpx;
   padding-bottom: 80rpx;

   span {
     display: inline-block;
     width: 290rpx;
     height: 76rpx;
     text-align: center;
     line-height: 76rpx;
     background: #00cc76;
     border-radius: 12rpx;
     -webkit-border-radius: 12rpx;
     color: white;
     font-size: 28rpx;
     color: white;
   }
 }
</style>

